<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <% include("/view/console/common/css.html"){}	%>
<style>
 .form-display{
  background-color: rgba(255,255,255,0.7);
  border: 1px solid #eeeeee;
  position: absolute;
  margin-top: 50px;
  padding-top: 10px;
  margin-left: 10px;
  border-radius: 10px;
  z-index: 9999;
  height: 410px;
  padding-right: 20px;
  display: none;
  width: 380px;
 }
</style>
 <title></title>
 </head>
 <body>

 <div class="zq-form">
  <div class="form-display">
 <form name="wnFarmland_form"  id="wnFarmland_form" class="form-horizontal" style="margin-bottom: 70px;">
 <input  type="hidden"  name="latlngs" id="latlngs" class="form-control" check-type="required" value='${wnFarmland.latlngs!}' >
 <div class="form-group" >
 <label class="control-label w70">农田名称</label>
 <div class="w200">
 <input  type="text"  name="name" id="name" class="form-control" check-type="required" value='${wnFarmland.name!}' >
 </div>
  </div>
 <div class="form-group" >
 <label class="control-label w70">农田编号</label>
 <div class="w200">
 <input  type="text"  name="farmlandNumber" id="farmlandNumber" class="form-control" check-type="required" value='${wnFarmland.farmlandNumber!}' >
 </div>
  </div>
 <div class="form-group">
 <label class="control-label w70">所属农场</label>
 <div class="w200">
 	<select class="form-control" id="farmId"
 		name="farmId" check-type="required">
 </select>
 </div>
 </div>
 <div class="form-group" >
 <label class="control-label w70">农田面积</label>
 <div class="w200">
 <input  type="text"  name="farmlandArea" id="farmlandArea" class="form-control" check-type="required" value='${wnFarmland.farmlandArea!}' >
 </div>
  <label class="control-label w10">(亩)</label>
  </div>
 <div class="form-group" >
 <label class="control-label w70">几何面积</label>
 <div class="w200">
 <input  type="text"  name="farmlandAreaGeometric" id="farmlandAreaGeometric" class="form-control" check-type="required" value='${wnFarmland.farmlandAreaGeometric!}' >
 </div>
  <label class="control-label w10">(亩)</label>
  </div>
 <input  type="hidden"  name="centerLatlng" id="centerLatlng" class="form-control" check-type="required" value='${wnFarmland.centerLatlng!}' >
  <div class="form-group" >
   <label class="control-label w70">地址</label>
   <div class="w200">
    <textarea  name="address" id="address" class="form-control"  style="width: 80%" rows="4">${wnFarmland.address!}</textarea>
   </div>
  </div>
   <input type='hidden' name='id' id='id' value='${wnFarmland.id!}'><input type='hidden' name='common_token' id='common_token' value='${common_token!}'>
 </form>
  <nav class="navbar navbar-default navbar-fixed-bottom" style="text-align: right">
    <a href="#" class="btn btn-success" style="margin:10px"  onclick='saveZqForm()'>保存 </a>
  </nav>
 </div>
 </div>
 <div id="googleMap"></div>
 <% include("/view/console/common/js.html"){} 	%>
 <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyCttnir7GHS6XxOoIT64aPT_BW9sIXC3q8&sensor=false&libraries=drawing"></script>
 <script type='text/javascript' src='/view/console/wnFarmland/wnFarmlandForm.js'></script>
 <script>


     layui.use(['layer','laydate'], function(){

     });
     $(function($) {
      /*开启表单验证*/
         $("#wnFarmland_form").validation();
         componentSelectInit(
             {
                 ctxPath:'',
                 tableName:"wn_farm",
                 showValueField:"name",
                 valueField:"id",
                 selectId:"farmId"  ,
                 where:""
             }
             ,function(){
                 $("#farmId").val('${wnFarmland.farmId!}');
             });

     });
     /*保存*/
     function saveZqForm(){
         if ($("#wnFarmland_form").valid() == false) {
             return false;
         }
         var formObject=new Object();
         formObject.latlngs=$('#latlngs').val()==''?null:$('#latlngs').val();
         formObject.name=$('#name').val()==''?null:$('#name').val();
         formObject.farmlandNumber=$('#farmlandNumber').val()==''?null:$('#farmlandNumber').val();
         formObject.farmId=$('#farmId').val()==''?null:$('#farmId').val();
         formObject.farmlandArea=$('#farmlandArea').val()==''?null:$('#farmlandArea').val();
         formObject.farmlandAreaGeometric=$('#farmlandAreaGeometric').val()==''?null:$('#farmlandAreaGeometric').val();
         formObject.centerLatlng=$('#centerLatlng').val()==''?null:$('#centerLatlng').val();
         formObject.address=$('#address').val()==''?null:$('#address').val();
         formObject.id=$('#id').val()==''?null:$('#id').val();

         var formObjectJson = JSON.stringify(formObject);
         zqPost("/console/wn_farmland/save",
             {
                 formObjectJson :formObjectJson,
                 common_token :$("#common_token").val()
             }, function(data) {
                 layer.alert(data.message, {skin: 'layui-layer-molv',closeBtn: 0 }, function(){
                     parent.$("#wnFarmland").bootstrapTable("refresh");
                     parent.layer.closeAll();
                 });

             });
     }


     $(function(){
         $("#googleMap").width($(window).width()-16);
         $("#googleMap").height($(window).height()-16);
         var cen;
         if('${wnFarmland.centerLatlng!}'!=''){
             cen= JSON.parse('${wnFarmland.centerLatlng!}')
         }else{
             cen = {lat:39.9054905603894,lng:116.39763216225809}
         }

         var map =  wnDrawingPolygon.getMap("googleMap",null,cen);
         var data = {
             paths :JSON.parse('${wnFarmland.latlngs!"[]"}')
         }
         var polygonOptions={};
         var d =  wnDrawingPolygon.getDrawingManager();

         d.setMap(map);


      if($("#id").val()!=''){
          $(".form-display").show(1000);
          var c =  new google.maps.Marker({
              position: new google.maps.LatLng(cen.lat, cen.lng),
              icon: "/static/image/map/farmland.png"
          });
          c.setMap(map);
          var bermudaTriangle = new google.maps.Polygon({
                   paths: data.paths,
                   strokeColor: "#FF0000",
                   //描边的颜色
                   strokeOpacity: 0.8,
                   //描边的透明度
                   strokeWeight: 1,
                   //描边的线宽
                   fillColor: null,
                   //填充的颜色
                   fillOpacity: 0.4,
                   //填充的透明度
                   editable: true,
                   //允许编辑
                   zIndex: google.maps.Marker.MAX_ZINDEX + 3
              });
          bermudaTriangle.setMap(map);
          d.setDrawingMode(null);

          var path = bermudaTriangle.getPath();
          var bounds = new google.maps.LatLngBounds();
          var obj ={
              bounds : bounds,
              paths:bermudaTriangle.getPath(),
              map:map,
              cent:c

          }
          google.maps.event.addListener(path, 'insert_at', function() {
              obj.paths=path;
              initP(obj);
          });

          google.maps.event.addListener(path, 'remove_at', function() {
              obj.paths=path;
              initP(obj);
          });

          google.maps.event.addListener(path, 'set_at', function() {
              obj.paths=path;
              initP(obj);
          });
      function initP(obj) {
         obj.cent.setMap(null);
          obj.bounds =new google.maps.LatLngBounds();
         for(var i=0; i<obj.paths.getArray().length;i++){
             obj.bounds.extend(obj.paths.getArray()[i]);
         };
         obj.cent=new google.maps.Marker({
             position: obj.bounds.getCenter(),
             icon: "/static/image/map/farmland.png"
         });
      obj.cent.setMap(obj.map);
         var mianji = google.maps.geometry.spherical.computeArea(obj.paths)*0.0015;
         $("#farmlandAreaGeometric").val(mianji);
         $("#latlngs").val(JSON.stringify( obj.paths.getArray() ));
         $("#centerLatlng").val(JSON.stringify(obj.bounds.getCenter()));
         var geocoder = new google.maps.Geocoder();
         geocoder.geocode({ location: obj.bounds.getCenter()}, function geoResults(results, status) {
             //这里处理结果和上面一模一样
             if (status == google.maps.GeocoderStatus.OK) {
                 $("#address").val( results[0].formatted_address );
                 // alert('地理反解析结果：' + results[0].geometry.location);
             }
             else {
                 alert("：error " + status);
             }
         });
       }

      }else{
          wnDrawingPolygon.setEvent(d,map,function(arr,center,mj){
              $(".form-display").show(1000);
              mj=toDecimal(mj);
              // $("#farmlandArea").val(mj);
              $("#farmlandAreaGeometric").val(mj);
              $("#latlngs").val(JSON.stringify(arr));
              $("#centerLatlng").val(JSON.stringify(center));
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({ location: center}, function geoResults(results, status) {
                  //这里处理结果和上面一模一样
                  if (status == google.maps.GeocoderStatus.OK) {
                      $("#address").val( results[0].formatted_address );
                      // alert('地理反解析结果：' + results[0].geometry.location);
                  }
                  else {
                      alert("：error " + status);
                  }
              });
          });
      }

     });
     function toDecimal(x) {
         var f = parseFloat(x);
         if (isNaN(f)) {
             return;
         }
         f = Math.round(x*100)/100;
         return f;
     }


 </script>

 </body>
